@dss-kit/ui-kit 0.3.8 → 0.3.9

package/dist/components/builders/Table/Table.js

@@ -1,13 +1,13 @@
 import { jsx as o, jsxs as v } from "react/jsx-runtime";
 import { cx as p, css as b } from "@emotion/css";
-import { useReactTable as He, getPaginationRowModel as Me, getSortedRowModel as Ne, getCoreRowModel as ke, flexRender as H, createColumnHelper as Ie } from "@tanstack/react-table";
-import { useMemo as ze, useImperativeHandle as Ve } from "react";
+import { useReactTable as He, getPaginationRowModel as Me, getSortedRowModel as Ne, getCoreRowModel as ke, flexRender as H, createColumnHelper as ze } from "@tanstack/react-table";
+import { useMemo as Ie, useImperativeHandle as Ve } from "react";
 import Le from "../../../assets/svg/table/search.svg.js";
-import { styles as Ee } from "./styles.js";
-import { useControllableState as s } from "./Table.hooks.js";
+import { typography as We } from "../../../styles/utils/typography.js";
+import { useControllableState as m } from "./Table.hooks.js";
 import { getColumnPinningStyles as f } from "./Table.utils.js";
-import { TablePlaceholder as Fe } from "./TablePlaceholder/TablePlaceholder.js";
-import { TableWrapper as We } from "./TableWrapper/TableWrapper.js";
+import { TablePlaceholder as Ee } from "./TablePlaceholder/TablePlaceholder.js";
+import { TableWrapper as Fe } from "./TableWrapper/TableWrapper.js";
 import { TableHeadRow as je } from "./TableHeadRow/TableHeadRow.js";
 import { TablePagination as Be } from "./TablePagination/TablePagination.js";
 import { TableHeadCell as De } from "./TableHeadCell/TableHeadCell.js";
@@ -19,32 +19,34 @@ import { TableHeadCellContent as Oe } from "./TableHeadCellContent/TableHeadCell
 import { TableHeadCellContentSortable as $e } from "./TableHeadCellContentSortable/TableHeadCellContentSortable.js";
 import { theme as qe } from "../../../utils/theme/index.js";
 import { Box as Ge } from "../Box/Box.js";
-const { spacing: M, color: t } = qe, Je = b({
+const { spacing: M, color: l } = qe, Je = b({
+  ...We.body2,
+  fontWeight: 500,
   width: "100%",
   maxWidth: "100%",
   minWidth: "max-content",
   borderCollapse: "collapse",
   borderSpacing: 0,
-  backgroundColor: t.fill.bgPrimary
+  backgroundColor: l.fill.bgPrimary
 }), Qe = b({
-  backgroundColor: t.fill.bgSecondary,
-  color: t.text.tertiary
+  backgroundColor: l.fill.bgSecondary,
+  color: l.text.tertiary
 }), Ue = b({
   pointerEvents: "none",
   userSelect: "none"
 }), N = ["70%", "55%", "80%", "60%"], c = ({
-  ref: I,
+  ref: z,
   data: h,
   columns: u,
   showBorders: g = !0,
-  enableSorting: z = !1,
+  enableSorting: I = !1,
   enablePagination: S = !1,
   enableRowSelection: V = !1,
   enableMultiRowSelection: L = !1,
   enableColumnPinning: d = !1,
-  columnPinning: E,
-  onColumnPinningChange: F,
-  sorting: W,
+  columnPinning: W,
+  onColumnPinningChange: E,
+  sorting: F,
   onSortingChange: j,
   manualSorting: B,
   columnFilters: D,
@@ -55,7 +57,7 @@ const { spacing: M, color: t } = qe, Je = b({
   onPaginationChange: $,
   rowSelection: q,
   onRowSelectionChange: G,
-  totalCount: m,
+  totalCount: s,
   loading: i = !1,
   loadingRowCount: J = 10,
   emptyLabels: Q = {
@@ -70,47 +72,47 @@ const { spacing: M, color: t } = qe, Je = b({
   emptyStateClassName: Z,
   emptyStateTitleClassName: ee,
   emptyStateDescriptionClassName: oe,
-  paginationClassName: le,
-  tableOptions: ne = {},
+  paginationClassName: ne,
+  tableOptions: te = {},
   onRowClick: w,
-  getRowId: te,
+  getRowId: le,
   headCellComponent: ie = De,
   bodyCellComponent: x = _e,
   headRowComponent: ae = je,
   bodyRowComponent: R = Ae,
   onReset: re,
-  paginationVariant: se,
-  paginationLabels: me,
+  paginationVariant: me,
+  paginationLabels: se,
   renderPageSizeSelectorDropdownItem: ce,
   renderPageSizeSelectorInputItem: ge
 }) => {
-  const [de, pe] = s(
-    W,
+  const [de, pe] = m(
+    F,
     j,
     []
-  ), [he, Ce] = s(
+  ), [he, Ce] = m(
     D,
     _,
     []
-  ), [fe, be] = s(
+  ), [fe, be] = m(
     A,
     K,
     {}
-  ), [a, C] = s(
+  ), [a, C] = m(
     O,
     $,
     { pageIndex: 0, pageSize: 10 }
-  ), [ue, Se] = s(q, G, {}), [ye, we] = s(
+  ), [ue, Se] = m(q, G, {}), [ye, we] = m(
+    W,
     E,
-    F,
     { left: [], right: [] }
-  ), T = B ?? !!m, xe = ze(
+  ), T = B ?? !!s, xe = Ie(
     () => u.map((e) => ({
       enableSorting: !1,
       ...e
     })),
     [u]
-  ), n = He({
+  ), t = He({
     data: h,
     columns: xe,
     state: {
@@ -128,41 +130,40 @@ const { spacing: M, color: t } = qe, Je = b({
     onRowSelectionChange: Se,
     onColumnPinningChange: we,
     getCoreRowModel: ke(),
-    getSortedRowModel: z && !T ? Ne() : void 0,
+    getSortedRowModel: I && !T ? Ne() : void 0,
     getPaginationRowModel: S ? Me() : void 0,
     enableRowSelection: V,
     enableMultiRowSelection: L,
     enableColumnPinning: d,
-    getRowId: te,
+    getRowId: le,
     manualSorting: T,
-    manualPagination: !!m,
-    pageCount: m ? Math.ceil(m / a.pageSize) : void 0,
-    ...ne
+    manualPagination: !!s,
+    pageCount: s ? Math.ceil(s / a.pageSize) : void 0,
+    ...te
   });
-  Ve(I, () => n);
-  const { rows: P } = n.getRowModel(), Re = (e, l) => {
-    w && w(e.original, l);
+  Ve(z, () => t);
+  const { rows: P } = t.getRowModel(), Re = (e, n) => {
+    w && w(e.original, n);
   }, Te = (e) => /* @__PURE__ */ o(
     ie,
     {
       style: {
         width: e.getSize(),
-        ...d && f(n, e.column, t.fill.bgSecondary)
+        ...d && f(t, e.column, l.fill.bgSecondary)
       },
       onClick: i ? void 0 : e.column.getToggleSortingHandler(),
       children: e.isPlaceholder ? null : H(e.column.columnDef.header, e.getContext())
     },
     e.id
-  ), Pe = (e, l) => /* @__PURE__ */ o(
+  ), Pe = (e, n) => /* @__PURE__ */ o(
     R,
     {
       showBorders: g,
-      isSelected: e.getIsSelected(),
-      onClick: () => Re(e, l),
+      onClick: () => Re(e, n),
       children: e.getVisibleCells().map((r) => /* @__PURE__ */ o(
         x,
         {
-          style: d ? f(n, r.column, t.fill.bgPrimary) : void 0,
+          style: d ? f(t, r.column, l.fill.bgPrimary) : void 0,
           children: H(r.column.columnDef.cell, r.getContext())
         },
         r.id
@@ -173,10 +174,10 @@ const { spacing: M, color: t } = qe, Je = b({
     R,
     {
       showBorders: g,
-      children: n.getVisibleLeafColumns().map((l, r) => /* @__PURE__ */ o(
+      children: t.getVisibleLeafColumns().map((n, r) => /* @__PURE__ */ o(
         x,
         {
-          style: d ? f(n, l, t.fill.bgPrimary) : void 0,
+          style: d ? f(t, n, l.fill.bgPrimary) : void 0,
           children: /* @__PURE__ */ o(k, { children: /* @__PURE__ */ o(
             Ke,
             {
@@ -186,20 +187,20 @@ const { spacing: M, color: t } = qe, Je = b({
             }
           ) })
         },
-        l.id
+        n.id
       ))
     },
     `skeleton-row-${e}`
   );
   return !i && !P.length ? /* @__PURE__ */ o(
-    Fe,
+    Ee,
     {
       icon: /* @__PURE__ */ o(
         Le,
         {
           width: 24,
           height: 24,
-          style: { color: t.icon.tertiary, marginBottom: M.sm }
+          style: { color: l.icon.tertiary, marginBottom: M.sm }
         }
       ),
       labels: Q,
@@ -209,7 +210,7 @@ const { spacing: M, color: t } = qe, Je = b({
       descriptionClassName: oe
     }
   ) : /* @__PURE__ */ v(Ge, { w: "full", gap: M.xl, className: p(y), children: [
-    /* @__PURE__ */ o(We, { data: h, showBorders: g, children: /* @__PURE__ */ v("table", { className: p(Je, Ee.table, U), children: [
+    /* @__PURE__ */ o(Fe, { data: h, showBorders: g, children: /* @__PURE__ */ v("table", { className: p(Je, U), children: [
       /* @__PURE__ */ o(
         "thead",
         {
@@ -219,27 +220,27 @@ const { spacing: M, color: t } = qe, Je = b({
             X
           ),
           "aria-busy": i,
-          children: n.getHeaderGroups().map((e) => /* @__PURE__ */ o(ae, { showBorders: g, children: e.headers.map(Te) }, e.id))
+          children: t.getHeaderGroups().map((e) => /* @__PURE__ */ o(ae, { showBorders: g, children: e.headers.map(Te) }, e.id))
         }
       ),
       /* @__PURE__ */ o("tbody", { className: Y, children: i ? Array.from(
         { length: J },
-        (e, l) => ve(l)
-      ) : P.map((e, l) => Pe(e, l)) })
+        (e, n) => ve(n)
+      ) : P.map((e, n) => Pe(e, n)) })
     ] }) }),
     S && !i && /* @__PURE__ */ o(
       Be,
       {
         pageIndex: a.pageIndex,
         pageSize: a.pageSize,
-        totalCount: m || h.length,
-        variant: se,
-        labels: me,
+        totalCount: s || h.length,
+        variant: me,
+        labels: se,
         renderPageSizeSelectorDropdownItem: ce,
         renderPageSizeSelectorInputItem: ge,
         onPageChange: (e) => C({ ...a, pageIndex: e }),
         onPageSizeChange: (e) => C({ ...a, pageSize: e, pageIndex: 0 }),
-        className: le
+        className: ne
       }
     )
   ] });
@@ -248,7 +249,7 @@ c.displayName = "Table";
 c.HeadCellContent = Oe;
 c.BodyCellContent = k;
 c.HeadCellContentSortable = $e;
-c.createColumnHelper = Ie;
+c.createColumnHelper = ze;
 export {
   c as Table
 };

package/dist/components/builders/Table/TableBodyRow/TableBodyRow.d.ts

@@ -4,10 +4,5 @@ export interface TableBodyRowProps extends React.HTMLAttributes<HTMLTableRowElem
      * @default false
      */
     showBorders?: boolean;
-    /**
-     * Выбрана ли строка
-     * @default false
-     */
-    isSelected?: boolean;
 }
 export declare const TableBodyRow: import('react').ForwardRefExoticComponent<TableBodyRowProps & import('react').RefAttributes<HTMLTableRowElement>>;

package/dist/components/builders/Table/TableBodyRow/TableBodyRow.js

@@ -1,16 +1,20 @@
-import { jsx as m } from "react/jsx-runtime";
-import { css as a, cx as c } from "@emotion/css";
-import { forwardRef as d } from "react";
-import { theme as f } from "../../../../utils/theme/index.js";
-const { color: n } = f, p = d(
-  ({ children: o, className: r, showBorders: e = !1, isSelected: i = !1, ...t }, s) => {
-    const l = a({
-      borderBottom: e ? `1px solid ${n.border.neutralAlphaLow}` : "none"
+import { jsx as n } from "react/jsx-runtime";
+import { css as m, cx as c } from "@emotion/css";
+import { forwardRef as i } from "react";
+import { theme as d } from "../../../../utils/theme/index.js";
+const { color: o } = d, f = i(
+  ({ children: r, className: e, showBorders: t = !1, ...a }, l) => {
+    const s = m({
+      borderBottom: t ? `1px solid ${o.border.neutralAlphaLow}` : "none",
+      transition: "background-color 0.15s ease-in-out",
+      "&:hover": {
+        backgroundColor: o.fill.neutralPrimaryHover
+      }
     });
-    return /* @__PURE__ */ m("tr", { ref: s, className: c(l, r), ...t, children: o });
+    return /* @__PURE__ */ n("tr", { ref: l, className: c(s, e), ...a, children: r });
   }
 );
-p.displayName = "TableBodyRow";
+f.displayName = "TableBodyRow";
 export {
-  p as TableBodyRow
+  f as TableBodyRow
 };

package/dist/components/builders/Table/TableWrapper/TableWrapper.js

@@ -1,9 +1,9 @@
-import { jsx as i } from "react/jsx-runtime";
-import { css as n, cx as d } from "@emotion/css";
-import { memo as F, useState as f, useRef as L, useCallback as k, useEffect as E } from "react";
-import { theme as W } from "../../../../utils/theme/index.js";
-import { Box as b } from "../../Box/Box.js";
-const { color: s, cornerRadius: C } = W, z = n({
+import { jsx as c } from "react/jsx-runtime";
+import { css as n, cx as f } from "@emotion/css";
+import { memo as k, useState as d, useRef as x, useCallback as E, useEffect as W } from "react";
+import { theme as $ } from "../../../../utils/theme/index.js";
+import { Box as m } from "../../Box/Box.js";
+const { color: o, cornerRadius: C } = $, P = n({
   position: "relative",
   borderRadius: C.md,
   overflow: "hidden",
@@ -14,66 +14,65 @@ const { color: s, cornerRadius: C } = W, z = n({
     bottom: 14,
     width: 96,
     pointerEvents: "none",
-    zIndex: 1,
     transition: "opacity 0.2s ease"
   },
   "&::before": {
     left: 0,
-    background: "linear-gradient(to left, rgba(255, 255, 255, 0.00) 0%, #FFF 100%)"
+    background: `linear-gradient(to left, transparent 0%, ${o.fill.bgPrimary} 100%)`
   },
   "&::after": {
     right: 0,
-    background: "linear-gradient(to right, rgba(255, 255, 255, 0.00) 0%, #FFF 100%)"
+    background: `linear-gradient(to right, transparent 0%, ${o.fill.bgPrimary} 100%)`
   }
 }), N = n({
   overflowX: "auto",
   scrollbarWidth: "thin",
-  scrollbarColor: `${s.scrollbar.thumbPrimary} ${s.scrollbar.trackPrimary}`
-}), T = F(
+  scrollbarColor: `${o.scrollbar.thumbPrimary} ${o.scrollbar.trackPrimary}`
+}), T = k(
   ({
-    data: m,
+    data: b,
     children: h,
     className: p,
     scrollContainerClassName: u,
     showBorders: w = !1,
-    ...S
+    ...y
   }) => {
-    const [g, v] = f(!1), [y, R] = f(!1), t = L(null), r = k(() => {
-      const e = t.current;
-      if (!e) return;
-      const { scrollLeft: o, scrollWidth: a, clientWidth: l } = e, c = a > l;
-      v(c && o > 0), R(
-        c && o < a - l - 1
+    const [S, g] = d(!1), [v, R] = d(!1), s = x(null), e = E(() => {
+      const r = s.current;
+      if (!r) return;
+      const { scrollLeft: t, scrollWidth: a, clientWidth: l } = r, i = a > l;
+      g(i && t > 0), R(
+        i && t < a - l - 1
       );
     }, []);
-    E(() => {
-      const e = t.current;
-      if (!e) return;
-      r();
-      const o = new ResizeObserver(r);
-      return o.observe(e), e.addEventListener("scroll", r), () => {
-        o.disconnect(), e.removeEventListener("scroll", r);
+    W(() => {
+      const r = s.current;
+      if (!r) return;
+      e();
+      const t = new ResizeObserver(e);
+      return t.observe(r), r.addEventListener("scroll", e), () => {
+        t.disconnect(), r.removeEventListener("scroll", e);
       };
-    }, [r, m]);
-    const x = n({
-      border: w ? `1px solid ${s.border.neutralAlphaLow}` : "transparent",
+    }, [e, b]);
+    const L = n({
+      border: w ? `1px solid ${o.border.neutralAlphaLow}` : "transparent",
       "&::before": {
-        opacity: g ? 1 : 0
+        opacity: S ? 1 : 0
       },
       "&::after": {
-        opacity: y ? 1 : 0
+        opacity: v ? 1 : 0
       }
     });
-    return /* @__PURE__ */ i(
-      b,
+    return /* @__PURE__ */ c(
+      m,
       {
-        className: d(z, x, p),
-        ...S,
-        children: /* @__PURE__ */ i(
-          b,
+        className: f(P, L, p),
+        ...y,
+        children: /* @__PURE__ */ c(
+          m,
           {
-            ref: t,
-            className: d(N, u),
+            ref: s,
+            className: f(N, u),
             children: h
           }
         )